<template>
  <div class="editgoods">
    <!-- 顶部 -->
    <el-tabs type="border-card">
      <!-- 基础信息 -->
      <el-tab-pane label="基础信息">
        <el-form ref="form" :model="form">
          <el-form-item label="所属分类">
            <el-select v-model="form.category_id" placeholder="请选择所属分类">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in category"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品名称">
            <el-input v-model="editdata.name" class="produname"></el-input>
          </el-form-item>

          <el-form-item label="所属品牌">
            <el-select v-model="editdata.brand_id" placeholder="请选择活动区域">
              <el-option
                :label="item.id"
                :value="item.id"
                v-for="item in BrandLists"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品简介">
            <el-input
              class="produintroduction"
              type="textarea"
              v-model="editdata.goods_brief"
            ></el-input>
          </el-form-item>
          <!-- 商品图片 -->
          <el-form-item label="商品图片">
            <el-upload
              class="avatar-uploader"
              action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
              name="good_pic"
              :on-success="handleAvatarSuccess"
              :headers="token"
              :show-file-list="false"
            >
              <img v-if="posterURL" :src="posterURL" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <!-- 轮播图 -->
          <el-form-item label="轮播图片" v-if="gallery">
            <el-upload
              action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
              list-type="picture-card"
              :on-remove="handleRemove"
              :file-list="gallery"
              name="good_pic"
              :on-success="handlePictureCardPreview"
              :headers="token"
              :show-file-list="true"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <!-- 轮播图结束 -->

          <el-form-item label="商品单位">
            <el-input
              v-model="editdata.goods_unit"
              class="produintroduction"
            ></el-input>
          </el-form-item>

          <el-form-item label="商品库存">
            <el-input
              v-model="editdata.goods_number"
              class="produintroduction"
            ></el-input>
          </el-form-item>

          <el-form-item label="商品售价">
            <el-input
              v-model="editdata.retail_price"
              class="produintroduction"
            ></el-input>
          </el-form-item>
          <el-form-item label="推荐类型">
            <el-checkbox label="新品" name="type" v-model="erg"></el-checkbox>
            <el-checkbox label="人气" name="type" v-model="erg"></el-checkbox>
          </el-form-item>

          <el-form-item label="上架" prop="delivery">
            <el-switch v-model="form.delivery"></el-switch>
          </el-form-item>

          <el-form-item label="排序">
            <el-input
              v-model="editdata.sort_order"
              class="produintroduction"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(editdata, category)"
              >保存修改</el-button
            >
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 商品详情 -->
      <el-tab-pane label="商品详情"></el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
export default {
  data () {
    return {

 
    }
  }
}
</script>
 
<style lang = "less" scoped>
  .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.produname {
  width: 218px;
}
.produintroduction {
  width: 218px;
}
</style>